<template>
	<view>
		<view class="wrap u-skeleton">
			<!-- 滑动标签 -->
			<u-tabs-swiper class="u-skeleton-rect" ref="tabs" @change="changeTab" :list="tablist" :current="tabCurrent" :is-scroll="true" active-color="#01906c" inactive-color="#909399" bar-width="60" gutter="100"></u-tabs-swiper>
			<!-- 图文列表 -->
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(item, index) in swiperList" :key="index">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<!-- 有内容 -->
						<template v-if="item.list.length > 0">
							<index-content-list :item="item1" v-for="(item1,index1) in item.list" :key="index1"></index-content-list>
							<u-loadmore :status="loadStatus[tabCurrent]"></u-loadmore>
						</template>
						<!-- 无内容 -->
						<template v-else>
							<u-empty text="本来无一物,何处惹尘埃" src="/static/img/demo/winter.svg" icon-size="500" mode="list"></u-empty>
						</template>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 骨架屏 -->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 // 是否显示骨架屏组件
				loading: true,
				// 加载更多
				loadStatus: ['loadmore','loadmore','loadmore','loadmore','loadmore','loadmore'],
				// 标签栏
				tabCurrent:0, 
				tablist: [
					{name:"关注"},
					{name:"谷雨"},
					{name:"芒种"},
					{name:"小满",count:5},
					{name:"霜降"},
					{name:"寒露"}
				],
				// 列表数据
				swiperCurrent:0,
				swiperList:[
					{
						list:[
							{
								userPic:"/static/img/header/01.svg", // 头像
								username:"雨水", // 用户名
								isFollow:true, // 是否关注
								title:"最美的不是下雨天，是曾与你躲过雨的屋檐！", // 标题
								type:'video', // img：图文，video：视频
								playNum:"38w", // 播放数
								playLong:"10:30", // 播放时长
								coverPic:"/static/img/list/01.svg", // 封面图
								infoNum:{ // 顶踩信息
									index:1, // 0：没有操作，1：顶，2：踩
									smileNum:18, // 微笑数
									cryNum:9 // 哭泣数
								},
								commentNum:288, // 评论数
								shareNum:66 // 分享数
							},
							{
								userPic:"/static/img/header/02.svg", // 头像
								username:"芒种", // 用户名
								isFollow:false, // 是否关注
								title:"做一件有价值的事情，坚持下去等待时间的回报吧！", // 标题
								type:'img', // img：图文，video：视频
								coverPic:"/static/img/list/02.svg", // 封面图
								infoNum:{ // 顶踩信息
									index:0, // 0：没有操作，1：顶，2：踩
									smileNum:13, // 微笑数
									cryNum:2 // 哭泣数
								},
								commentNum:388, // 评论数
								shareNum:32 // 分享数
							},
							{
								userPic:"/static/img/header/03.svg", // 头像
								username:"小满", // 用户名
								isFollow:false, // 是否关注
								title:"生死看淡，不服就干，越努力，越幸运！", // 标题
								type:'img', // img：图文，video：视频
								coverPic:"/static/img/list/03.svg", // 封面图
								infoNum:{ // 顶踩信息
									index:2, // 0：没有操作，1：顶，2：踩
									smileNum:19, // 微笑数
									cryNum:20 // 哭泣数
								},
								commentNum:28, // 评论数
								shareNum:10 // 分享数
							},
							{
								userPic:"/static/img/header/04.svg", // 头像
								username:"谷雨", // 用户名
								isFollow:false, // 是否关注
								title:"如果你知道去哪儿，世界也会为你让路！", // 标题
								type:'video', // img：图文，video：视频
								playNum:"12w", // 播放数
								playLong:"06:20", // 播放时长
								coverPic:"/static/img/list/04.svg", // 封面图
								infoNum:{ // 顶踩信息
									index:0, // 0：没有操作，1：顶，2：踩
									smileNum:16, // 微笑数
									cryNum:20 // 哭泣数
								},
								commentNum:28, // 评论数
								shareNum:10 // 分享数
							},
							{
								userPic:"/static/img/header/05.svg", // 头像
								username:"霜降", // 用户名
								isFollow:false, // 是否关注
								title:"无论怎样，明天的太阳依旧会照常升起！", // 标题
								type:'img', // img：图文，video：视频
								coverPic:"/static/img/list/05.svg", // 封面图
								infoNum:{ // 顶踩信息
									index:1, // 0：没有操作，1：顶，2：踩
									smileNum:36, // 微笑数
									cryNum:12 // 哭泣数
								},
								commentNum:67, // 评论数
								shareNum:30 // 分享数
							}
						]
					},
					{
						list:[
							{
								userPic:"/static/img/header/06.svg", // 头像
								username:"芒种", // 用户名
								isFollow:false, // 是否关注
								title:"做一件有价值的事情，坚持下去等待时间的回报吧！", // 标题
								type:'img', // img：图文，video：视频
								coverPic:"/static/img/list/06.svg", // 封面图
								infoNum:{ // 顶踩信息
									index:0, // 0：没有操作，1：顶，2：踩
									smileNum:13, // 微笑数
									cryNum:2 // 哭泣数
								},
								commentNum:388, // 评论数
								shareNum:32 // 分享数
							},
							{
								userPic:"/static/img/header/07.svg", // 头像
								username:"小满", // 用户名
								isFollow:false, // 是否关注
								title:"生死看淡，不服就干，越努力，越幸运！", // 标题
								type:'img', // img：图文，video：视频
								coverPic:"/static/img/list/07.svg", // 封面图
								infoNum:{ // 顶踩信息
									index:2, // 0：没有操作，1：顶，2：踩
									smileNum:19, // 微笑数
									cryNum:20 // 哭泣数
								},
								commentNum:28, // 评论数
								shareNum:10 // 分享数
							}
						]
					},
					{
						list:[
							{
								userPic:"/static/img/header/08.svg", // 头像
								username:"谷雨", // 用户名
								isFollow:false, // 是否关注
								title:"生死看淡，不服就干，越努力，越幸运！", // 标题
								type:'img', // img：图文，video：视频
								coverPic:"/static/img/list/08.svg", // 封面图
								infoNum:{ // 顶踩信息
									index:2, // 0：没有操作，1：顶，2：踩
									smileNum:19, // 微笑数
									cryNum:20 // 哭泣数
								},
								commentNum:28, // 评论数
								shareNum:10 // 分享数
							},
							{
								userPic:"/static/img/header/09.svg", // 头像
								username:"霜降", // 用户名
								isFollow:false, // 是否关注
								title:"如果你知道去哪儿，世界也会为你让路！", // 标题
								type:'video', // img：图文，video：视频
								playNum:"12w", // 播放数
								playLong:"06:20", // 播放时长
								coverPic:"/static/img/list/09.svg", // 封面图
								infoNum:{ // 顶踩信息
									index:0, // 0：没有操作，1：顶，2：踩
									smileNum:16, // 微笑数
									cryNum:20 // 哭泣数
								},
								commentNum:28, // 评论数
								shareNum:10 // 分享数
							}
						]
					},
					{
						list:[
							{
								userPic:"/static/img/header/10.svg", // 头像
								username:"雨水", // 用户名
								isFollow:true, // 是否关注
								title:"继续全力奔跑，和优秀的人一起做有挑战的事情。！", // 标题
								type:'video', // img：图文，video：视频
								playNum:"38w", // 播放数
								playLong:"10:30", // 播放时长
								coverPic:"/static/img/list/10.svg", // 封面图
								infoNum:{ // 顶踩信息
									index:1, // 0：没有操作，1：顶，2：踩
									smileNum:18, // 微笑数
									cryNum:9 // 哭泣数
								},
								commentNum:288, // 评论数
								shareNum:66 // 分享数
							},
							{
								userPic:"/static/img/header/03.svg", // 头像
								username:"小满", // 用户名
								isFollow:false, // 是否关注
								title:"生死看淡，不服就干，越努力，越幸运！", // 标题
								type:'img', // img：图文，video：视频
								coverPic:"/static/img/list/11.svg", // 封面图
								infoNum:{ // 顶踩信息
									index:2, // 0：没有操作，1：顶，2：踩
									smileNum:19, // 微笑数
									cryNum:20 // 哭泣数
								},
								commentNum:28, // 评论数
								shareNum:10 // 分享数
							}
						]
					},
					{
						list:[
							{
								userPic:"/static/img/header/11.svg", // 头像
								username:"芒种", // 用户名
								isFollow:false, // 是否关注
								title:"无论怎样，明天的太阳依旧会照常升起！", // 标题
								type:'img', // img：图文，video：视频
								coverPic:"/static/img/list/12.svg", // 封面图
								infoNum:{ // 顶踩信息
									index:1, // 0：没有操作，1：顶，2：踩
									smileNum:36, // 微笑数
									cryNum:12 // 哭泣数
								},
								commentNum:67, // 评论数
								shareNum:30 // 分享数
							},
							{
								userPic:"/static/img/header/12.svg", // 头像
								username:"谷雨", // 用户名
								isFollow:false, // 是否关注
								title:"如果你知道去哪儿，世界也会为你让路！", // 标题
								type:'video', // img：图文，video：视频
								playNum:"12w", // 播放数
								playLong:"06:20", // 播放时长
								coverPic:"/static/img/list/01.svg", // 封面图
								infoNum:{ // 顶踩信息
									index:0, // 0：没有操作，1：顶，2：踩
									smileNum:16, // 微笑数
									cryNum:20 // 哭泣数
								},
								commentNum:28, // 评论数
								shareNum:10 // 分享数
							}
						]
					},
					{
						list:[]
					}
				]
			}
		},
		// 监听原生标题栏搜索输入框点击事件
		onNavigationBarSearchInputClicked() {
			this.$u.route('/pages/search/search');
		},
		// 监听原生标题栏按钮点击事件
		onNavigationBarButtonTap(e) {
			switch(e.index) {
				case 1:
					// 打开发布页面
					this.$u.route('/pages/index/release');
					break;
			}
			if(e.index == 0) {
				this.$u.route('/pages/index/release')
			}
		},
		onLoad() {
			// 通过延时模拟向后端请求数据，调隐藏骨架屏
			setTimeout(() => {
				this.loading = false;
			}, 1000)
		},
		methods: {
			// tab栏切换
			changeTab(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition({ detail: { dx } }) {
				this.$refs.tabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current; 
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.tabCurrent = current;
			},
			// scroll-view到底部加载更多
			reachBottom() {
				// 是否可加载
				if (this.loadStatus[this.tabCurrent] !== 'loadmore') return;
				// 加载更多
				this.loadStatus.splice(this.tabCurrent,1,"loading");
				setTimeout(() => {
					this.getList(this.tabCurrent);
				}, 1000);
			},
			// 获取列表
			getList(idx) {
				// 随机添加5条数据
				for(let i = 0; i < 5; i++) {
					let index = this.$u.random(0, this.swiperList[idx].list.length - 1);
					let data = JSON.parse(JSON.stringify(this.swiperList[idx].list[index]));
					this.swiperList[idx].list.push(data);
				}
				// 更新加载状态
				this.loadStatus.splice(this.tabCurrent,1,"nomore")
			}
		}
	}
</script>

<style lang="scss" scoped>
.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
}
.swiper-box {
	flex: 1;
}
.swiper-item {
	height: 100%;
}
</style>
